<!-- 全局页面组件 -->
<template>
	<!-- 单页面内置滚动条默认竖向滚动enable-back-to-top iOS点击顶部状态栏、安卓双击标题栏时，滚动条返回顶部，只支持竖向-->
	<view class="pagebox fullscreen"
		:style="{ background: boxBackground ? boxBackground : isCrowd ? '#f8f8f8' : '#e2e2e2' }">
		<!-- 导航栏  isback返回按钮，shownav是否显示导航栏-->
		<navigation id="navign" :isback="isback" :isShowBg="Boolean(imgbackdrop)" :isCrowd="isCrowd"
			:boxBackground="boxBackground" v-if="shownav">
			<!-- 自定义导航栏插槽 -->
			<view slot='nav'>
				<!-- 导航栏标题 -->
				<span v-if="navtitle != ''">{{ navtitle }}</span>
				<!-- 自定义导航栏插槽 -->
				<slot v-else name='nav' />
			</view>
		</navigation>
		<!-- 滚动条和导航的中间 -->
		<view id="head">
			<slot name='head' />
		</view>
		<!-- 滚动条  scrolltolower上拉加载，refresherrefresh下拉刷新-->
		<scroll-view @scrolltolower="tolower" @scroll="scroll" @refresherrefresh="refresher" scroll-y
			:refresher-enabled="istriggered" :refresherTriggered="triggered" enable-back-to-top
			:style="{ height: scrollH + 'px' }">
			<!-- 内容插槽 -->
			<view class="content" :style="{ padding: isCrowd ? '0' : '0 30rpx' }">
				<slot name='cent' v-if="isnulltips != 0" />
			</view>
			<!-- 无数据的时候显示无数据状态 -->
			<view class="flexcolumn nulltips" v-if="isnulltips == 0">
				<!-- 无数据图标 -->
				<view class="iconfont icon-zanwushuju"></view>
				<!-- 文字内容 -->
				<view class="tips">暂无数据</view>
			</view>
		</scroll-view>
		<!-- 滚动条和tabr的中间 -->
		<view id="footer">
			<slot name='footer' />
		</view>
		<!-- tabar切换栏 -->
		<tabbox v-if="istabbox" />
		<!-- 弹窗盒子 -->
		<slot name='modal' />
		<!-- 盒子背景图，默认全屏 ，图片地址参数 imgbackdrop-->
		<fimg v-if="imgbackdrop" require :src="imgbackdrop" class="imgbackdrop fullscreen" />
	</view>
</template>

<script>
// 导航栏组件
import navigation from "./navigation.vue";
// 
import tabbox from "./tabbox.vue";

export default {
	name: "pagebox", //全局页面组件
	components: {
		navigation, // 导航栏组件
		tabbox
	},
	props: {
		// 是否显示导航栏，默认不显示
		shownav: {
			type: [Boolean],
			default: false
		},
		// 是否显示返回按钮，默认不显示
		isback: {
			type: [Boolean],
			default: false
		},
		// 导航栏标题
		navtitle: {
			type: [String],
			default: ''
		},
		// 页面背景图片地址(可选参数)
		imgbackdrop: {
			type: [String],
			default: ''
		},
		// 页面背景图片地址(可选参数)
		isCrowd: {
			type: [Boolean],
			default: false
		},
		// 是否显示tab切换栏
		istabbox: {
			type: [Boolean],
			default: false
		},
		// 当数组无数据的时候，列表显示无数据，默认不显示
		listlength: {
			type: [Number, String],
			default: 1
		},
		// 是否开启下拉刷新，默认不开启
		istriggered: {
			type: [Boolean],
			default: false
		},
		boxBackground: {
			type: [String],
			default: ''
		},
	},

	data() {
		return {
			scrollH: 800, //当前页面高度
			navignH: 0, //导航栏高度信息
			headH: 0, //滚动条和导航的中间高度信息
			footerH: 0, //滚动条和tabr的中间高度信息
			screenH: 0, //设备高度
			isnulltips: 1, //是否判断显示无数据状态，默认不显示
			triggered: false, //自定义刷新状态
		}
	},
	watch: {
		// 初始化同步数据 
		listlength: {
			handler(newvalue, oldvalue) {
				this.isnulltips = newvalue / 1;
			},
			immediate: true,
			deep: true
		},
	},
	mounted() {
		// 获取节点信息计算高度属性，存储到缓冲中
		this.setdevice()
	},
	methods: {
		// 上拉加载事件
		tolower(e) {
			this.$emit("tolower", e)
		},
		// 下拉刷新
		refresher(e) {
			// 开始下拉动作
			this.triggered = true
			// 传出下拉事件
			this.$emit("refresher")
			// 关闭下拉动作
			this.$nextTick(() => {
				this.triggered = false
			})
		},
		// 获取节点信息计算高度属性，存储到缓冲中
		async setdevice() {
			// 获取设备高度信息
			var deviceinfo = await this.rest.select('device');
			this.screenH = deviceinfo.screenHeight
			// 显示导航栏的时候，获取导航栏信息
			if (this.shownav) {
				var nav = await this.rest.select('single', "#navign", this);
				this.navignH = nav.height
			}
			// 获取滚动条和导航的中间高度信息
			var head = await this.rest.select('single', "#head", this);
			this.headH = head.height
			// 获取滚动条和导航的中间高度信息
			var footer = await this.rest.select('single', "#footer", this);
			this.footerH = footer.height
			// 显示tab菜单的时候,获取tab菜单信息
			var h = this.istabbox ? 60 : 0
			// 计算当前页面高度
			this.scrollH = this.screenH - this.navignH - h - this.headH - this.footerH
			// 传出当前滚动条高度
			this.$emit("getscroll", this.scrollH)
		},
		// 监听滚动条事件
		scroll(e) {
			this.$emit("scroll", e)
		}
	}
}
</script>

<style lang="less" scoped>
//全局页面组件
.pagebox {
	z-index: 0;

	// 背景图片
	.imgbackdrop {
		z-index: -1;
	}

	.content {
		// padding: 0 30rpx;
	}

	// 暂无数据样式
	.nulltips {
		height: 100%;
		color: #a1a1a1;
		padding-top: 20vh;

		// 暂无数据的图标
		.icon-zanwushuju {
			font-size: 100rpx;
			color: #a1a1a1;
			margin-bottom: 20rpx;
		}

		.tips {
			font-size: 26rpx;
		}
	}
}
</style>